<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>do canvas</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
            <canvas id="canvas" height="350" width="350" style="border:1px black dotted" >Your browser are not support html5</canvas>
            <script type="text/javascript">
                var hua=document.getElementById('canvas');
                var paint=hua.getContext('2d');
                for (var i=0;i<10;i++){
                    paint.beginPath();
                    paint.arc(i*25,i*25,(i+1)*8,0,Math.PI*2,true);
                    paint.closePath();
                    paint.strokeStyle='purple';
                    paint.stroke();
                    paint.fillStyle='rgba(255,0,0,'+(10-i)*0.1+')';
                    paint.fill();
                }
                paint.fillStyle='rgba(50,50,4,.7)';
                paint.fillRect(50,50,100,100);
                paint.shadowBlur=7;
                paint.shadowColor="#afa";
                paint.shadowOffsetX=10;
                paint.shadowOffsetY=5;
                paint.lineWidth=5;
                paint.strokeStyle="#5ff";
                paint.strokeRect(160,160,100,100);
            </script>
        </div>
    </body>
</html>
